<template>
  <div class="sublist-actions">
    <div v-if="state.editing && rowIndex === state.editIndex">
      <n-flex>
        <n-button
          v-bind="common"
          type="primary"
          @click="actionConfirm"
        >
        确认
        </n-button>
        <n-button size="small"
text @click="actionCancel"
>
取消
</n-button>
      </n-flex>
    </div>
    <div v-else>
      <n-flex>
        <n-button
          :disabled="state.editing"
          size="small"
          text
          type="primary"
          @click="actionEdit(scope)"
        >
          编辑
        </n-button>
        <n-button
          :disabled="state.editing"
          size="small"
          text
          type="error"
          @click="actionRemove(rowIndex)"
        >
          删除
        </n-button>
      </n-flex>
    </div>
  </div>
</template>
<script setup>
const emit = defineEmits(['remove', 'edit', 'confirm', 'cancel']);
defineProps({
  rowIndex: {
    type: Number,
    default: null,
  },
  state: {
    type: Object,
    default: () => ({}),
  },
});

const common = {
  text: true,
  size: 'small',
};

const actionConfirm = () => {
  emit('confirm');
};
const actionCancel = () => {
  emit('cancel');
};
const actionEdit = () => {
  emit('edit');
};
const actionRemove = () => {
  emit('remove');
};
</script>
<style scoped></style>
